<template>
		<!-- 第一部分 -->
		<view class="first">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" >
					<swiper-item >
						<view class="swiper-item">
							<image class="first_img" @click="tz('第十二套')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/1.%E8%BD%AE%E6%92%AD%E5%9B%BE/1.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image class="first_img" @click="tz('第十七套')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/1.%E8%BD%AE%E6%92%AD%E5%9B%BE/2.jpg" mode=""></image>
						</view>
					</swiper-item>                                            
					<swiper-item>
						<view class="swiper-item">
							<image class="first_img" @click="tz('第八套')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/1.%E8%BD%AE%E6%92%AD%E5%9B%BE/3.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image class="first_img" @click="tz('第十四套')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/1.%E8%BD%AE%E6%92%AD%E5%9B%BE/4.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image class="first_img" @click="tz('第十套')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/1.%E8%BD%AE%E6%92%AD%E5%9B%BE/5.jpg" mode="" ></image>
						</view>
					</swiper-item>
				</swiper>			
			</view>
		</view>
		<view class="Kuai"></view>
		<!-- 第二部分 -->
		<view class="second">
			<view class="KePian">
				本月客片 | CUSIOMER CASE
			</view>
			<view  @click="tz_kepian('轮播图')">
				探索更多
			</view>
		</view>
		<view class="view_lunbo">
			<image class="lunbo" :src="picture1" mode=""></image>
		</view>
		<view class="Kuai"></view>
		<!-- 第三部分 -->
		<view class="third">
			<view class="WoMen">
				拍摄主题 | SHOOT SUBJECT
			</view>
			<view @click="tz_title_more('更多主题')">
				探索更多
			</view>
		</view>
		<view class="third_view">	
			<view class="third_image">
				<image class="third_img" @click="tz_zhuti('主题1')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/3.%E6%8B%8D%E6%91%84%E4%B8%BB%E9%A2%98/1.jpg" mode=""></image>
				<image class="third_img" @click="tz_zhuti('主题2')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/3.%E6%8B%8D%E6%91%84%E4%B8%BB%E9%A2%98/2.jpg" mode=""></image>
			</view>
		</view>
		<view class="Kuai"></view>
		<!-- 第四部分 -->
		<view class="fourth">
			<view class="ChangGuan">
				拍摄风格 | SHOOTING STYLE
			</view>
			<view @click="tz_fengge_more()" class="fourth_tansuo">
				探索更多
			</view>
		</view>
		<view class="fourth1">
			<view class="fourth_all">
				<view class="fourth_image">
					<image class="fourth_img" @click="tz_fengge('场馆1')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/4.%E5%9C%BA%E9%A6%86/1.jpg" mode=""></image>
					<view class="fourth1_text1">园林风格</view>
				</view>
				<view class="fourth_image">
					<image class="fourth_img" @click="tz_fengge('场馆2')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/4.%E5%9C%BA%E9%A6%86/2.jpg" mode=""></image>
					<view class="fourth1_text1">古长城</view>
				</view>
				<view class="fourth_image">
					<image class="fourth_img" @click="tz_fengge('场馆3')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/4.%E5%9C%BA%E9%A6%86/3.jpg" mode=""></image>
					<view class="fourth1_text1">梦幻礼堂</view>
				</view>
				<view class="fourth_image">
					<image class="fourth_img" @click="tz_fengge('场馆4')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/4.%E5%9C%BA%E9%A6%86/4.jpg" mode=""></image>
				<view class="fourth1_text1">海边风格</view>
			</view>
			</view>
		</view>
		<!-- 第五部分 -->
		<view class="Kuai"></view>
		<view class="fifth">
			<view class="XinPin">
				新品推荐 | NEWS CASE
			</view>
		</view>
		
		<view class="fifth_view">
			
			<view class="fifth_item">
				<image class="fifth_img" @click="tz('第十五套')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/5.%E6%96%B0%E5%93%81%E6%8E%A8%E8%8D%90/1.jpg" mode=""></image>
				<image class="fifth_img" @click="tz('第十八套')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/5.%E6%96%B0%E5%93%81%E6%8E%A8%E8%8D%90/2.jpg" mode=""></image>
			</view>
			<view class="fifth_item">
				<image class="fifth_img" @click="tz('第二套')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/5.%E6%96%B0%E5%93%81%E6%8E%A8%E8%8D%90/3.jpg" mode=""></image>
				<image class="fifth_img" @click="tz('第五套')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/5.%E6%96%B0%E5%93%81%E6%8E%A8%E8%8D%90/4.jpg" mode=""></image>
			</view>
			<view class="fifth_item">
				<image class="fifth_img" @click="tz('第九套')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/5.%E6%96%B0%E5%93%81%E6%8E%A8%E8%8D%90/5.jpg" mode=""></image>
				<image class="fifth_img" @click="tz('第十六套')" src="https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/5.%E6%96%B0%E5%93%81%E6%8E%A8%E8%8D%90/6.jpg" mode=""></image>
			</view>
		</view>
		<!-- 登录 -->
		<!-- <view class="login">
			<view class="login_text">点击登录，立即预约</view>
	
			<view class=""><button class="login_but">立即登录</button></view>
		</view> -->
		<view class="canvas-container">
			<canvas canvas-id="petalRainCanvas"  ref="canvasRef" id="petalRainCanvas" style="width: 100%; height: 100vh;"></canvas>
		</view>

		<view class="kaiguan" @click="togglePlay">{{ isPlaying ? '关' : '开' }}</view>

</template> 

<script setup>

import {ref,onMounted,onUnmounted} from 'vue'
const isPlaying = ref(false);
let audioContext = null;

	const togglePlay = () => {
	if (isPlaying.value) {
		audioContext.pause();
	} else {
		if (!audioContext) {
		audioContext = uni.createInnerAudioContext();
		audioContext.src = 'https://geng-123.oss-cn-beijing.aliyuncs.com/%E4%B8%A4%E7%89%88%E8%8A%B1%E5%A5%BD%E6%9C%88%E5%9C%86%E5%A4%9C/%E8%8A%B1%E5%A5%BD%E6%9C%88%E5%9C%86%E5%A4%9C%20%28%E5%9B%BD%E8%AF%AD%E7%89%88%29.mp3'; 
		audioContext.autoplay = true;
		audioContext.onPlay(() => {
			isPlaying.value = true;
		});
		audioContext.onPause(() => {
			isPlaying.value = false;
		});
		audioContext.onError((res) => {
			console.error('音乐播放错误', res);
		});
		} else {
		audioContext.play();
		}
	}
	};

	onMounted(() => {
	togglePlay(); 
	});

	onUnmounted(() => {
	if (audioContext) {
		audioContext.destroy();
	}
	})
	// 轮播图
	let indicatorDots=ref(true)
	let arrs=ref([
		'https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/2.%E8%BD%AE%E6%92%AD%E5%9B%BE/1.jpg',
		'https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/2.%E8%BD%AE%E6%92%AD%E5%9B%BE/2.jpg',
		'https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/2.%E8%BD%AE%E6%92%AD%E5%9B%BE/3.jpg',
		'https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/2.%E8%BD%AE%E6%92%AD%E5%9B%BE/4.jpg',
		'https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/2.%E8%BD%AE%E6%92%AD%E5%9B%BE/5.jpg',
		'https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/2.%E8%BD%AE%E6%92%AD%E5%9B%BE/6.jpg',
	])
	let picture1 = ref('https://geng-123.oss-cn-beijing.aliyuncs.com/%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/2.%E8%BD%AE%E6%92%AD%E5%9B%BE/1.jpg')
	
	let num=0 
	setInterval(()=>{
		num++
		picture1.value=arrs.value[num%4]
	},1000)

	//跳转作品详细页面
	function tz(name){	
		// console.log(name);
		uni.navigateTo({
			url:`xiangxi?kind=${name}`
		})
	}
	//跳转本月客片页面
	function tz_kepian(name){
		uni.navigateTo({
			url:`kepian?kind=${name}`
		})
	}
	//跳转拍摄风格页面
	function tz_fengge(name){
		uni.navigateTo({
			url:`fengge?kind=${name}`
		})
	}
	//跳转更多拍摄风格页面
	function tz_fengge_more(){
		uni.navigateTo({
			url:`fengge_more`
		})
	}
	//跳转主题页面
	function tz_zhuti(name){
		uni.navigateTo({
			url:`zhuti?kind=${name}`
		})
	}

	//跳转更多主题页面
	function tz_title_more(name){
		uni.navigateTo({
			url:`title_more?kind=${name}`
		})
	}

const canvasRef = ref(null);
const petals = [];

class Petal {
  constructor(x, y, size, speedX, speedY) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speedX = speedX;
    this.speedY = speedY;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.bezierCurveTo(this.x + this.size, this.y - this.size, this.x + this.size, this.y + this.size, this.x, this.y + this.size);
    ctx.bezierCurveTo(this.x - this.size, this.y + this.size, this.x - this.size, this.y - this.size, this.x, this.y);
    ctx.closePath();
    ctx.fillStyle = 'pink';
    ctx.fill();
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.stroke();
  }

  update() {
	const { windowWidth, windowHeight } = uni.getSystemInfoSync();
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.y > windowHeight || this.x > windowWidth || this.x < 0) {
      this.y = -this.size;
      this.x = Math.random() * windowHeight;
    }
  }
}

const createPetals = () => {
  const { windowWidth, windowHeight } = uni.getSystemInfoSync();
  for (let i = 0; i < 50; i++) {
    const x = Math.random() * windowWidth;
    const y = Math.random() * windowHeight;
    const size = Math.random() * 10 + 5;
    const speedX = (Math.random() - 0.5) * 2;
    const speedY = Math.random() * 2 + 1;
    petals.push(new Petal(x, y, size, speedX, speedY));
  }
};
let intervalId = null; // 改为使用intervalId

const animate = () => {
  const { windowWidth, windowHeight } = uni.getSystemInfoSync();
  const canvas = uni.createCanvasContext('petalRainCanvas');
  canvas.clearRect(0, 0, windowWidth, windowHeight);
  petals.forEach(petal => {
    petal.draw(canvas);
    petal.update();
  });
  canvas.draw();
};

onMounted(() => {
  createPetals();
  intervalId = setInterval(animate, 16); // 每16毫秒调用一次，类似于60FPS
});

onUnmounted(() => {
  clearInterval(intervalId); // 清除定时器
});


</script>

<style lang="scss" scoped>
.kaiguan{

	position: fixed;
	right:10rpx;
	bottom: 300rpx;
	width: 100rpx;
	height: 100rpx;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: rgba(0,0, 0, 0.2);
	color:#fff;
	text-align: center;
	line-height: 100rpx;
	font-size: 50rpx;
}
	

	.first{
		width: 746rpx ;
		height: 1050rpx ;
		// border: 1rpx solid #000;
		.first_img{
			width: 746rpx;
			height: 1050rpx;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			opacity: 70%;
		}
	}
		.uni-margin-wrap {
			width: 690rpx;
			width: 100%;
		}
		.swiper {
			height: 1050rpx;
		}
		.swiper-item {
			display: block;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
		}
		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}
		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}
		.info {
			position: absolute;
			right: 20rpx;
		}
		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}
	// -----------------------------------
	//本月客片
	.second{
		width: 695rpx;
		display: flex;
		justify-content: space-between;
		padding-left: 30rpx;
		margin-top: 30rpx;
		.KePian{
			font-size: 30 rpx;
			font-weight: bold; /* 加粗 */
			text-align: center;
			margin-right: 100rpx;
		}
	}
	.view_lunbo{
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */	
		margin-top: 30rpx;	
		// border: 1rpx solid #000;
		padding-bottom: 30rpx;
		.lunbo{
			border-radius: 30rpx;
			width: 690rpx;
			height: 450rpx;
			opacity: 70%;
		}		
	}
	.Kuai{
		background-color: #F5F5F5;
		height: 30rpx;
	}
	// ---------------------------
	// 关于我们
	.third{
		width: 690rpx;
		display: flex;
		justify-content: space-between;
		// border: 1rpx solid #000;
		margin-left: 30rpx;
		margin-top: 30rpx;
		.WoMen{
			font-size: 30 rpx;
			font-weight: bold; /* 加粗 */
			text-align: center;
			margin-right: 100rpx;
		}
	}
	.third_view{
	}
	.third_view{
		width: 746rpx;
		// border: 1rpx solid #000;;
	}
	.third_view_1{
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */	
		margin-top: 30rpx;	
	}
	.third_image{
		width: 690rpx;
		height: 440rpx;
		display: flex;
		justify-content: space-between;
		// border: 1rpx solid red;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-bottom: 35rpx;
		.third_img{
			width: 330rpx;
			height: 440rpx;
			border-radius: 35rpx;
			opacity: 70%;
		}
	}
// ----------------------------------
// 场馆
.fourth{
	width: 690rpx;
	display: flex;
	justify-content: space-between;
	// border: 1rpx solid #000;
	margin-left: 30rpx;
	margin-top: 30rpx;
		.ChangGuan{
			font-size: 30 rpx;
			font-weight: bold; /* 加粗 */
			text-align: center;
		}
		.fourth_tansuo{
			
		}
}
.fourth1{
	
}
.fourth1{
	margin-top: 25rpx;
	width: 746rpx;
	height: 640rpx;
	// border: 1rpx solid #000;
	padding-bottom: 10rpx;
}
.fourth_all{
	width: 690rpx;
	height: 620rpx;
	display: flex;
	justify-content: space-between; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	flex-wrap: wrap;
	// border: 1rpx solid red;
	margin-left: 30rpx;
}
.fourth_image{
	// border: 1rpx solid #000;
}
.fourth_img{
	width: 338rpx;
	height: 250rpx;
	border-radius: 30rpx;
	opacity: 70%;
}
	
.fourth1_text1{
	// border: 1rpx solid #000;
	font-size: 20rpx;
}
.fifth{
	width: 690rpx;
	display: flex;
	justify-content: space-between;
	// border: 1rpx solid #000;
	margin-left: 30rpx;
	margin-top: 30rpx;
}
.XinPin{
	font-size: 30 rpx;
	font-weight: bold; /* 加粗 */
	text-align: center;
}
.fifth_view{
	width: 746rpx;
	height: 1600rpx;
	// border: 1rpx solid #000;
	margin-top: 30rpx;
}
.fifth_item{
	width: 690rpx;
	display: flex;
	justify-content: space-between; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	flex-wrap: wrap;
	// border: 1rpx solid red;
	margin-left: 30rpx;
	margin-top: 15rpx;
}
.fifth_img{
	width: 338rpx;
	height: 470rpx;
	border-radius: 30rpx;
	opacity: 70%;
}
.login{
	width: 746rpx;
	height: 90rpx;
	border: 1px solid #000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30rpx;
	background-color: rgba(0,0, 0, 0.5);
	position: fixed;
	bottom: 180rpx;
}
.yinyue{
	background-color: rgba(0,0, 0, 0.5);
	color:#fff;
	font-size: 30rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	border-radius: 30rpx;
	width: 180rpx;
	height: 60rpx;
	line-height: 60rpx;
}
	
.login_text{
	color:#fff;
	margin-left: 30rpx;
	font-size: 30rpx;
}
.login_but{
	width: 160rpx;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #005093;
	color:#fff;
	font-size: 25rpx;
	border-radius: 30rpx;
	text-align: center;
	margin-right: 30rpx;
}
// canvas样式
.canvas-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index:-1;
}
//背景音乐开关

</style>
